<template>
  <div>
    <el-dialog
      title="订单改价"
      :visible.sync="dialogVisible"
      width="750px"
      :close-on-click-modal="false"
      append-to-body
      @close="close"
    >
      <el-form
        v-if="detail"
        ref="form"
        v-loading="loading"
        size="small"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <div v-for="(item,index) in detail.amounts" :key="index" class="flexRBC">
          <el-form-item v-if="item.type==='GOODS'" label="商品价格：">￥ {{ item.amount/100 }}</el-form-item>
          <el-form-item v-if="item.type==='DELIVERY'" label="订单运费：">￥ {{ item.amount/100 }}</el-form-item>
        </div>
        <el-form-item label="订单优惠：" />
        <el-form-item label="订单应付：" />
        <el-divider />
        <el-form-item label="更改运费：" prop="remark">
          <el-input v-model="form.money1" placeholder="请输入运费">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="订单改价：" prop="remark">
          <el-input v-model="form.money2" placeholder="请输入金额">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>-->
        <el-form-item label="改价备注：" prop="remark">
          <el-input v-model="form.code" placeholder="请输入备注" maxlength="200" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div class="flexCCC">
          <el-button size="large" round type="primary" class="btn-submit" @click="submit">保存改价</el-button>
          <el-button size="text" round @click="hide">取 消</el-button>
        </div>
      </div>
      <div>
        <div v-for="item in spec" :key="item.id">
          <div>{{ item.title }}</div>
          <span
            v-for="subItem in item.attr"
            :key="subItem.id"
            :style="{color:subItem.disable?'#e3e3e3':'blue'}"
            @click="choose(subItem.id)"
          >{{ subItem.title }}&nbsp;&nbsp;</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { orderPickUp } from '@/views/wxaMallModule/api/order'
export default {
  data() {
    return {
      // 校验字段
      rules: {},
      // 配置
      resolve: null,
      reject: null,
      // 状态
      loading: false,
      dialogVisible: true,
      // 数据
      detail: null,
      form: {
        money1: null,
        money2: null,
        remark: null
      },
      activeGoods: [],
      spec: [
        {
          id: 1,
          title: '材料',
          attr: [
            {
              id: 4,
              title: '金属',
              disable: false
            },
            {
              id: 5,
              title: '塑料',
              disable: false
            },
            {
              id: 6,
              title: '空气',
              disable: false
            }
          ]
        },
        {
          id: 2,
          title: '颜色',
          attr: [
            {
              id: 7,
              title: '红',
              disable: false
            },
            {
              id: 8,
              title: '绿',
              disable: false
            },
            {
              id: 9,
              title: '蓝',
              disable: false
            }
          ]
        }
      ],
      skuOptions: [],
      sku: [
        { id: 1, attr: [4, 7], num: 8, buy: true },
        { id: 2, attr: [5, 7], num: 8, buy: true },
        { id: 3, attr: [6, 7], num: 0, buy: true },
        { id: 4, attr: [4, 8], num: 8, buy: true },
        { id: 5, attr: [5, 8], num: 8, buy: true },
        { id: 6, attr: [6, 8], num: 0, buy: true },
        { id: 7, attr: [4, 9], num: 8, buy: false },
        { id: 8, attr: [5, 9], num: 8, buy: true },
        { id: 9, attr: [6, 9], num: 0, buy: true }
      ],
      attr: [4, 5, 6, 7, 8, 9]
    }
  },
  mounted() {
    this.getAllOptions()
  },
  methods: {
    /**
       * 弹框相关
       */
    open({ detail }) {
      this.detail = detail
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      this.form = {
        code: null,
        orderNo: null,
        remark: null
      }
      this.loading = false
      this.$refs.form.resetFields()
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    /**
       * 数据组
       */

    /**
       * 按钮组
       */
    // 确 定
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          return
          this.form.orderNo = this.detail.orderNo
          this.form.remark = this.detail.remark
          this.loading = true
          orderPickUp(this.form)
            .then((res) => {
              this.$notify({
                title: '成功',
                message: '提货成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.resolve && this.resolve()
              this.hide()
            })
            .catch((err) => {})
            .finally(() => {
              this.loading = false
            })
        }
      })
    },

    getVertexRow(id) {
      const index = this.container(id)
      const col = []
      this.attr.forEach((item, pIndex) => {
        console.log()
        col.push(this.skuOptions[index + this.attr.length * pIndex])
      })
      return col
    },

    // 判断一个数组中是否某个元素
    container(id) {
      let tem = -1
      this.attr.forEach((v, i) => {
        if (v === id) tem = i
      })
      return tem
    },

    getAllOptions() {
      const attrLength = this.attr.length
      this.skuOptions = Array.from({ length: attrLength }, (v, i) =>
        Array.from({ length: attrLength }, (v, i) => 0)
      )
      console.log(this.getVertexRow(4))
      // let attrLength = attr.length;
      // let options = Array.from({ length: attrLength }, (v, i) =>
      //   Array.from({ length: attrLength }, (v, i) => 0)
      // );
      // let indexArr = [];
      // this.sku.forEach((item) => {
      //   if (item.num && item.buy) {
      //     let indexArr = [];
      //     item.attr.forEach((subItem) => {
      //       indexArr.push(attr.findIndex((id) => id === subItem));
      //       console.log(indexArr);
      //     });
      //   }
      // });
      // return options;
    },

    choose(id) {
      this.goods
    }

    /**
       * 状态组
       */

    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .w-400 {
    width: 400px;
    display: block;
    margin: 0 auto;
  }
  .btn-submit {
    margin-bottom: 20px;
  }
</style>
